<template>
  <div class="schedule-stats">
    <!-- 头部区域 -->
    <div class="stats-header">
      <h3>日程统计</h3>
      <el-button type="text" size="mini" @click="refreshStats">
        <i class="el-icon-refresh"></i> 刷新
      </el-button>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-cards">
      <el-card class="stat-card stat-card--primary">
        <div class="card-content">
          <div class="card-info">
            <div class="card-value">{{ events.dateCount || 0 }}</div>
            <div class="card-label">本月总日程</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card stat-card--danger">
        <div class="card-content">
          <div class="card-info">
            <div class="card-value">{{ meetingRate }}%</div>
            <div class="card-label">会议占比</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 类型分布区域 -->
    <div class="type-distribution">
      <h4>日程类型分布</h4>
      <div class="distribution-list">
        <div
          class="distribution-item"
          v-for="item in typeDistribution"
          :key="item.type"
        >
          <div class="item-label">
            <span
              class="color-dot"
              :style="{ backgroundColor: getEventTypeColor(item.type) }"
            ></span>
            <span class="type-name">{{ getEventTypeName(item.type) }}</span>
          </div>
          <div class="item-bar">
            <div
              class="bar-fill"
              :style="{ width: item.percent + '%', backgroundColor: getEventTypeColor(item.type) }"
            ></div>
            <span class="bar-text">{{ item.count }} ({{ item.percent }}%)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDateCount } from '@/api/dates/date'

export default {
  name: 'ScheduleStats',
  data () {
    return {
      events: {
        dateCount: 0,
        meetingCount: 0,
        personalCount: 0,
        otherCount: 0
      }
    }
  },
  computed: {
    // 会议占比（仅统计团队会议类型）
    meetingRate () {
      if (!this.events.dateCount) return 0
      return Math.round((this.events.meetingCount / this.events.dateCount) * 100)
    },

    // 类型分布统计
    typeDistribution () {
      const items = [
        { type: 'meeting', count: this.events.meetingCount || 0 },
        { type: 'personal', count: this.events.personalCount || 0 },
        { type: 'other', count: this.events.otherCount || 0 }
      ].filter(item => item.count > 0)

      const total = this.events.dateCount || 0
      return items.map(item => ({
        ...item,
        percent: total ? Math.round((item.count / total) * 100) : 0
      }))
    }
  },
  methods: {
    // 获取事件类型颜色
    getEventTypeColor (type) {
      const colorMap = {
        meeting: '#409EFF',   // 团队会议
        personal: '#F56C6C',  // 个人日程
        other: '#E6A23C'      // 其他
      }
      return colorMap[type] || '#409EFF'
    },

    // 获取事件类型名称
    getEventTypeName (type) {
      const nameMap = {
        meeting: '团队会议',
        personal: '个人日程',
        other: '其他'
      }
      return nameMap[type] || '其他'
    },

    // 刷新统计数据
    refreshStats () {
      this.getUserCount()
      this.$message.success('统计数据已更新')
    },

    // 获取统计数据
    getUserCount() {
      getDateCount().then(res => {
        this.events = res.data || {
          dateCount: 0,
          meetingCount: 0,
          personalCount: 0,
          otherCount: 0
        }
      }).catch(error => {
        console.error('获取日程统计失败:', error)
        this.$message.error('获取日程统计失败')
      })
    }
  },
  created () {
    this.getUserCount()
  }
}
</script>

<style lang="less" scoped>
// 主题变量
@primary-color: #409EFF; // 主色
@success-color: #67C23A; // 成功色
@warning-color: #E6A23C; // 警告色
@danger-color: #F56C6C; // 危险色
@info-color: #909399; // 信息色

@card-radius: 16px; // 卡片圆角
@card-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); // 卡片阴影
@hover-scale: translateY(-6px); // 悬停位移
@transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // 过渡曲线

.schedule-stats {
  background: #fff;
  border-radius: @card-radius;
  box-shadow: @card-shadow;
  padding: 28px;
  font-family: 'Microsoft YaHei', sans-serif;

  // 头部区域
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;

    h3 {
      font-size: 18px;
      color: #2c2d30;
      font-weight: 600;
      margin: 0;
    }

    .el-button {
      color: @primary-color;

      i {
        margin-right: 4px;
      }
    }
  }

  // 统计卡片区域
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;

    .stat-card {
      border: none;
      border-radius: @card-radius;
      padding: 24px;
      transition: @transition;
      box-shadow: @card-shadow;

      &:hover {
        transform: @hover-scale;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      }

      .card-content {
        display: flex;
        align-items: center;

        .card-info {
          .card-value {
            font-size: 32px;
            font-weight: 700;
            color: #2c2d30;
            line-height: 1;
          }

          .card-label {
            font-size: 12px;
            color: #666;
            margin-top: 15px;
          }
        }
      }
    }

    // 卡片配色方案
    .stat-card--primary {
      background: linear-gradient(135deg, #eaf5ff, #dceeff);

      .card-icon i {
        color: @primary-color;
      }
    }

    .stat-card--success {
      background: linear-gradient(135deg, #f3ffe8, #e3ffd8);

      .card-icon i {
        color: @success-color;
      }
    }

    .stat-card--warning {
      background: linear-gradient(135deg, #fff8e2, #fff2d2);

      .card-icon i {
        color: @warning-color;
      }
    }

    .stat-card--danger {
      background: linear-gradient(135deg, #fff5f5, #ffeaea);

      .card-icon i {
        color: @danger-color;
      }
    }
  }

  // 类型分布区域
  .type-distribution {
    h4 {
      font-size: 16px;
      color: #2c2d30;
      font-weight: 600;
      margin: 0 0 16px 0;
    }

    .distribution-list {
      .distribution-item {
        margin-bottom: 16px;

        .item-label {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .color-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
          }

          .type-name {
            font-size: 14px;
            color: #666;
          }
        }

        .item-bar {
          display: flex;
          align-items: center;
          gap: 8px;

          .bar-fill {
            height: 6px;
            border-radius: 4px;
            flex: 1;
            transition: width 0.5s ease;
          }

          .bar-text {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
